---
title: Editable
description: "`Editable` is a component used to obtain inline editable text input."
storybook: components-editable--basic
source: components/editable
style: components/editable/editable.style.ts
---

```tsx preview
<Editable.Root defaultValue="なんとかなれーッ！">
  <Editable.Preview />
  <Editable.Input />
</Editable.Root>
```

## Usage

:::code-group

```tsx [package]
import { Editable } from "@yamada-ui/react"
```

```tsx [alias]
import { Editable } from "@/components/ui"
```

```tsx [monorepo]
import { Editable } from "@workspaces/ui"
```

:::

```tsx
<Editable.Root>
  <Editable.Preview />
  <Editable.Input />
  <Editable.Textarea />
  <Editable.Control>
    <Editable.EditTrigger />
    <Editable.SubmitTrigger />
    <Editable.CancelTrigger />
  </Editable.Control>
</Editable.Root>
```

### Use Textarea

To enable multiple lines, use `Editable.Textarea`.

```tsx preview
<Editable.Root defaultValue={`おやつ…って事!?\nそれって最高じゃん!!`}>
  <Editable.Preview />
  <Editable.Textarea />
</Editable.Root>
```

### Make Edit Mode Default

To make edit mode default, set `startWithEditView` to `true`.

```tsx preview
<Editable.Root defaultValue="なんとかなれーッ！" startWithEditView>
  <Editable.Preview />
  <Editable.Input />
</Editable.Root>
```

### Disable Submit on Blur

To prevent submitting changes when focus is lost, set `submitOnBlur` to `false`.

```tsx preview
<Editable.Root defaultValue="なんとかなれーッ！" submitOnBlur={false}>
  <Editable.Preview />
  <Editable.Input />
</Editable.Root>
```

### Disable Text Selection on Focus

To prevent text selection when focused, set `selectAllOnFocus` to `false`.

```tsx preview
<Editable.Root defaultValue="なんとかなれーッ！" selectAllOnFocus={false}>
  <Editable.Preview />
  <Editable.Input />
</Editable.Root>
```

### Change Border Color

To change the border color, set a color to `focusBorderColor` or `errorBorderColor`.

```tsx preview
<VStack>
  <Editable.Root
    defaultValue="Custom focus border color"
    focusBorderColor="green.500"
  >
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>

  <Editable.Root
    defaultValue="Custom error border color"
    errorBorderColor="orange.500"
    invalid
  >
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>
</VStack>
```

### Disable

To disable, set `disabled` to `true`.

```tsx preview
<VStack>
  <Editable.Root defaultValue="Your email address" disabled>
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>

  <Field.Root
    disabled
    helperMessage="We'll never share your email."
    label="Email address"
  >
    <Editable.Root defaultValue="Your email address">
      <Editable.Preview />
      <Editable.Input />
    </Editable.Root>
  </Field.Root>
</VStack>
```

### Read-Only

To read-only, set `readOnly` to `true`.

```tsx preview
<VStack>
  <Editable.Root defaultValue="Your email address" readOnly>
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>

  <Field.Root
    readOnly
    helperMessage="We'll never share your email."
    label="Email address"
  >
    <Editable.Root defaultValue="Your email address">
      <Editable.Preview />
      <Editable.Input />
    </Editable.Root>
  </Field.Root>
</VStack>
```

### Invalid

To make the input invalid, set `invalid` to `true`.

```tsx preview
<VStack>
  <Editable.Root defaultValue="Your email address" invalid>
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>

  <Field.Root
    invalid
    helperMessage="We'll never share your email."
    label="Email address"
  >
    <Editable.Root defaultValue="Your email address">
      <Editable.Preview />
      <Editable.Input />
    </Editable.Root>
  </Field.Root>
</VStack>
```

### Control

```tsx preview
<Editable.Root defaultValue="なんとかなれーッ！">
  <Editable.Preview />
  <Editable.Input />

  <Editable.Control>
    <Editable.EditTrigger>
      <IconButton
        size="xs"
        variant="ghost"
        aria-label="Edit"
        icon={<PencilIcon />}
      />
    </Editable.EditTrigger>
    <Editable.SubmitTrigger>
      <IconButton
        size="xs"
        variant="outline"
        aria-label="Submit"
        icon={<CheckIcon />}
      />
    </Editable.SubmitTrigger>
    <Editable.CancelTrigger>
      <IconButton
        size="xs"
        variant="outline"
        aria-label="Cancel"
        icon={<XIcon />}
      />
    </Editable.CancelTrigger>
  </Editable.Control>
</Editable.Root>
```

### Control

```tsx preview functional client
const CustomControls = () => {
  const { getCancelProps, getEditProps, getSubmitProps } = Editable.useContext()
  return (
    <ButtonGroup.Root size="xs">
      <ButtonGroup.IconItem
        icon={<PencilIcon />}
        {...getEditProps()}
        variant="ghost"
        aria-label="Edit"
      />

      <ButtonGroup.IconItem
        icon={<CheckIcon />}
        {...getSubmitProps()}
        variant="outline"
        aria-label="Submit"
      />

      <ButtonGroup.IconItem
        icon={<XIcon />}
        {...getCancelProps()}
        variant="outline"
        aria-label="Cancel"
      />
    </ButtonGroup.Root>
  )
}

return (
  <Editable.Root defaultValue="なんとかなれーッ！" previewFocusable={false}>
    <Editable.Preview />
    <Editable.Input />
    <CustomControls />
  </Editable.Root>
)
```

## Props

<PropsTable name="editable" />

## Accessibility

Currently, this section is being updated due to the migration of v2.
